<template>
  <view class="comment-list-container">
    <view v-for="(item, idx) in comments" :key="idx" class="comment-item">
      <view class="comment-header">
        <image
          class="avatar"
          :src="item.avatar"
          mode="aspectFill"
          @click="toUser(item.avatarId)"
        />
        <view class="user-info">
          <view class="user-row">
            <text class="username">{{ item.nickname }}</text>
            <!-- <text v-if="item.isAuthor" class="author-tag">作者</text> -->
          </view>
          <view>
            <text class="comment-title">{{ item.title }}</text>
            <text class="comment-time">{{ item.createtime }}</text></view
          >
          <view class="comment-content">{{ item.content }}</view>
        </view>
        <image
          class="comment-img"
          :src="item.pic"
          mode="aspectFill"
          @click="toDetail(item.detailId)"
        />
      </view>
      <view v-if="item.reply" class="reply-box">
        <text class="reply-content">{{ item.reply }}</text>
      </view>
      <!-- <view class="comment-actions">
        <view class="action-btn">
          <image class="icon" src="@/pagesSocial/static/img/album.png" />
          <text>赞</text>
        </view>
        <view class="action-btn">
          <image class="icon" src="@/pagesSocial/static/img/album.png" />
          <text>回复</text>
        </view>
      </view> -->
    </view>
    <nomore text="没有更多内容了" v-if="nomore"></nomore>
  </view>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
      comments: [
        // {
        //   avatar:
        //     "https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg",
        //   nickname: "菲妈教辅咨询",
        //   isAuthor: true,
        //   createtime: "2024-10-29",
        //   title: "在评论中@了你",
        //   content:
        //     "@佩琪一家 @程程吃吃 @若木 @李丽娜 @二十 @秦晓白 @古再努尔 @Sunny @菲 @爱学习的橙汁🍊",
        //   likeCount: 0,
        //   reply: null,
        // },
        // {
        //   avatar:
        //     "https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg",
        //   nickname: "是小雨呀",
        //   isAuthor: false,
        //   createtime: "2024-05-04",
        //   title: "回复了你的评论",
        //   content: "请问在哪里买的呢？",
        //   likeCount: 0,
        //   reply: "111",
        // },
        // {
        //   avatar:
        //     "https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg",
        //   nickname: "momo",
        //   isAuthor: false,
        //   createtime: "2024-04-29",
        //   title: "回复了你的评论",
        //   content: "咸鱼啊，在哪里买呢？",
        //   likeCount: 0,
        //   reply: null,
        // },
        // {
        //   avatar:
        //     "https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg",
        //   nickname: "爱吃橙子🍊",
        //   isAuthor: true,
        //   createtime: "2024-04-13",
        //   content: "这是一个绕口令\n哎哟，在酷狗里面找了一下，居然没…",
        //   likeCount: 0,
        //   reply: null,
        // }
      ],
      page: 1,
      limit: 10,
      nomore: false,
      canload: true,
    };
  },
  onReachBottom: function () {
    console.log("触底");
    if (this.canload) {
      this.page++;
      this.getlist();
    }
  },
  onLoad() {
    this.getlist();
  },
  onPullDownRefresh: function () {
    this.page = 1;
    this.comments = [];
    this.nomore = false;
    this.canload = true;
    this.getlist();
  },
  methods: {
    getlist() {
      let that = this;
      app.showLoading("加载中");
      app.get(
        "MemberNote/noteMessagelist",
        {
          type: 3,
          page: that.page,
          limit: that.limit,
        },
        function (res) {
          app.showLoading(false);
          if (res.status == 200) {
            if (res.data.length == 0) {
              that.nomore = true;
              that.canload = false;
            } else {
              var newData = res.data.map((item) => {
                return {
                  avatarId: item.member.id,
                  title: item.title,
                  avatar: item.member.headimg,
                  nickname: item.member.nickname,
                  isAuthor: true,
                  createtime: item.create_time,
                  content: item.content,
                  likeCount: 0,
                  reply: null,
                  detailId: item.data_id,
                  pic: item.member_note.pic,
                };
              });
              that.comments = that.comments.concat(newData);
            }
          }
        }
      );
    },
    toUser(id) {
      app.goto("/pagesEchart/find/works?mid=" + id);
    },
    toDetail(id) {
      app.goto("/pagesEchart/find/works-detail?id=" + id + "&type=0");
    },
  },
};
</script>

<style scoped>
.comment-list-container {
  padding: 24rpx 0;
  background: #f8f8f8;
}
.comment-item {
  background: #fff;
  border-radius: 16rpx;
  margin: 0 24rpx 24rpx 24rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
}
.comment-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.avatar {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.comment-img {
  width: 72rpx;
  height: 72rpx;
  margin-left: 20rpx;
}
.user-info {
  flex: 1;
  width: 1rpx;
}
.user-row {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}
.username {
  font-weight: 600;
  font-size: 30rpx;
  margin-right: 18rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.author-tag {
  background: #ffffff;
  color: #969696;
  border: #969696 1rpx solid;
  font-size: 22rpx;
  border-radius: 18rpx;
  padding: 2rpx 10rpx;
  margin-right: 12rpx;
  flex-shrink: 0;
}

.comment-title {
  font-size: 25rpx;
  color: #616161;
  margin-bottom: 8rpx;
}
.comment-time {
  font-size: 25rpx;
  color: #616161;
  margin-left: 10rpx;
}
.comment-content {
  font-size: 28rpx;
  color: #222;
  margin: 12rpx 0;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reply-box {
  background: #ffffff;
  border-radius: 10rpx;
  /* padding: 14rpx 18rpx; */
  margin: 12rpx 0 0 92rpx;
  font-size: 26rpx;
  color: #666;
  display: flex;
  align-items: flex-start;
}
.reply-content ::before {
  content: "\00a0 ";
  border-left: 5px solid #eaeaea;
}
.reply-label {
  color: #888;
  margin-right: 6rpx;
}
.reply-content {
  color: #666;
}
.comment-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 12rpx;
  margin-left: 92rpx;
}
.action-btn {
  display: flex;
  align-items: center;
  margin-right: 32rpx;
  color: #000000;
  font-size: 26rpx;
  background-color: #eee;
  padding: 5px 10px;
  border-radius: 20px;
}
.icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 8rpx;
}
</style>
